<!DOCTYPE html>
<html>
<head>
<div th:include="base-libs :: base-libs" />
</head>
<script th:src="'/service/js/jtqy.js'"></script>
<title>变更服务包</title>

<style>
.layui-form-select {
    width: 80%;
}
#tbody tr td {
	height: 30px;
	padding: 0.4px 10px;
}
.layui-table th{
	padding: 6px 10px;
}
#tbody .layui-input{
	height: 28px;
}
</style>
<script th:inline="javascript">
	/**读取request中的初始化数据*/
	var result = [[${DATA}]];
</script>

<script type="text/javascript">
//var bgfwbInfo = StoreCache.removeCache("JTQYXYINFO");
	$(function(){
		initView();
		layui.use('element', function(){
			  var element = layui.element();
			  
			  //…
			});
	});
	function initView(){
		for(var i = 0 ; i < result.QYLSJL.length ; i ++){
			var item = result.QYLSJL[i];
			var tr = $("<tr>");
			var td1 = $("<td>").html(cutDate_YYYYMMDD(item["SXSJ"]) + " 至  " + cutDate_YYYYMMDD(item["JSSJ"]));
			var td2 = $("<td>").html(item["YLJGMC"]);
			var td3 = $("<td>").html(item["TDMC"]);
			var td4 = $("<td>").html(item["FWBMC"]);
			var td5 = $("<td>");
			var td6 = $("<td>");
			if(item["QYLX"] == "03"){
				td5.html("已解约").css("color","red");
				td6.html("解约日期：" + cutDate_YYYYMMDD(item["JYSJ"]) + " / 原因：" + item["ZTMS"] );
			}else{
				td5.html("已到期");
				td6.html(item["ZTMS"]);
			}
			tr.append(td1,td2,td3,td4,td5,td6);
			$("#qyjlTbody").append(tr);
		}
		for(var i = 0 ; i < result.ZJTDJL.length ; i ++){
			var item = result.ZJTDJL[i];
			var tr = $("<tr>");
			var td1 = $("<td>").html(cutDate_YYYYMMDD(item["SXSJ"]) + " 至  " + cutDate_YYYYMMDD(item["JSSJ"]));
			var td2 = $("<td>").html(item["YLJGMC"]);
			var td3 = $("<td>").html(item["YQYTDMC"]);
			var td4 = $("<td>").html(item["FWBMC"]);
			var td5 = $("<td>").html(item["XQYTDMC"]);
			var td6 = $("<td>").html(cutDate_YYYYMMDD(item["SHRQ"]));
			var td7 = $("<td>").html(item["ZJYYMS"]);
			tr.append(td1,td2,td3,td4,td5,td6,td7);
			$("#zjjlTbody").append(tr);
		}
		for(var i = 0 ; i < result["BGFWBJL"].length ; i ++){
			var item = result["BGFWBJL"][i];
			var tr = $("<tr>");
			var td1 = $("<td>").html(cutDate_YYYYMMDD(item["SXSJ"]) + " 至  " + cutDate_YYYYMMDD(item["JSSJ"]));
			var td2 = $("<td>").html(item["YLJGMC"]);
			var td3 = $("<td>").html(item["TDMC"]);
			var td4 = $("<td>").html(item["YFWBMC"]);
			var td5 = $("<td>").html(cutDate_YYYYMMDD(item["BGSJ"]));
			var td6 = $("<td>").html(item["XFWBMC"]);
			tr.append(td1,td2,td3,td4,td5,td6);
			$("#bgfwbTbody").append(tr);
		}
	}
	
	function backFun(){
		parent.layer.closeAll();
	}
	
	/** 截取时间 */
	function cutDate_YYYYMMDD(date){
		if(!StringUtils.isEmpty(date)){
			return date.substring(0,10);
		}
	}
</script>

<body class="easyui-layout" fit="true" border="false">
<div region="center" >
	<div class="layui-tab layui-tab-card" style="height: 95.2%;">
	  <ul class="layui-tab-title">
	    <li class="layui-this">签约记录</li>
	    <li>转介记录</li>
	    <li>变更服务包记录</li>
	  </ul>
	  <div class="layui-tab-content" >
	    <div class="layui-tab-item layui-show">
			<table class="layui-table">
			  <colgroup>
			    <col width="150">
			    <col width="100">
			    <col width="80">
			    <col width="100">
			    <col width="50">
			    <col width="200">
			  </colgroup>
			  <thead>
			    <tr>
			      <th>签约周期</th>
			      <th>签约机构</th>
			      <th>签约团队</th>
			      <th>签约服务包</th>
			      <th>签约状态</th>
			      <th>备注</th>
			    </tr> 
			  </thead>
			  <tbody id="qyjlTbody">
			  </tbody>
			</table> 
		</div>
	    <div class="layui-tab-item">
			<table class="layui-table">
			  <colgroup>
			    <col width="150">
			    <col width="100">
			    <col width="80">
			    <col width="100">
			    <col width="80">
			    <col width="70">
			    <col width="100">
			  </colgroup>
			  <thead>
			    <tr>
			      <th>签约时间</th>
			      <th>签约机构</th>
			      <th>原签约团队</th>
			      <th>签约服务包</th>
			      <th>现签约团队</th>
			      <th>转介时间</th>
			      <th>转介原因</th>
			    </tr> 
			  </thead>
			  <tbody id="zjjlTbody">
			  </tbody>
			</table> 
		</div>
	    <div class="layui-tab-item">
			<table class="layui-table">
			  <colgroup>
			    <col width="150">
			    <col width="100">
			    <col width="80">
			    <col width="150">
			    <col width="100">
			    <col width="150">
			  </colgroup>
			  <thead>
			    <tr>
			      <th>签约时间</th>
			      <th>签约机构</th>
			      <th>签约团队</th>
			      <th>原服务包</th>
			      <th>变更时间</th>
			      <th>新服务包</th>
			    </tr> 
			  </thead>
			  <tbody id="bgfwbTbody">
			  </tbody>
			</table> 
		</div>
	  </div>
	</div>
	</div>
</body>
</html>
